<template>
  <div class="o-tree">
    <!-- showFilter=false会隐藏 当没有菜单项（data为null或者[]）时候也会隐藏 -->
    <div
      v-if="showFilter && !dataIsEmpty"
      :style="{
        position:'relative'
      }"
    >
      <input
        v-model="filterText"
        :placeholder="filterPlaceholderText"
        :style="{
          height:'36px',
          border: '1px solid #EEF0F4',
          borderRadius: '8px',
          padding:'10px 10px 10px 30px',
          width:'100%',
          fontSize:'14px',
          marginBottom:'16px'
        }"
      >
      <i
        class="el-icon-search"
        :style="{
          position:'absolute',
          top:'10px',
          left:'10px',
          color:'#EEE0F4'
        }"
      />

    </div>
    <!-- 附加功能区域，可以添加一些全局的，额外的操作，如创建一级菜单项 -->
    <slot
      name="extras"
      v-bind:data="$attrs.data"
    />
    <el-tree
      v-if="!dataIsEmpty"
      v-bind="$attrs"
      ref="tree"
      class="filter-tree"
      :actions="actions"
      :filter-node-method="filterNode"
      v-on="$listeners"
    >
      <div
        slot-scope="{ node, data }"
        class="o-tree-item"
        :style="{
          display:'flex',
          width:'100%',
          height:'48px',
          lineHeight:'48px',
          color:'#24262A'
        }"
      > 
        <div
          :style="{
            flex:'0 0 16px',
            width:'16px',
            height:'16px',
            position:'relative',
            top: theme.expandIconOffset?theme.expandIconOffset:'3px'
          }"
        >
          <div
            v-if="data.children && data.children.length !== 0"
            :style="{
              width:'16px',
              height:'16px',
              display:'inline-block',
              border:'1px #777C94 dashed' 
            }"
          >
            <i
              v-if="!node.expanded"
              class="el-icon-caret-right"
              :style="{
                position:'absolute',
                color:'#777C94',
                fontSize:'15px'
              }"
            />
            <i
              v-if="node.expanded"
              class="el-icon-caret-bottom"
              :style="{
                position:'absolute',
                color:'#777C94',
                fontSize:'15px'
              }"
            />
          </div>
        </div>
        <div
          :style="[theme.labelStyle,{
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            flex:'0 0 auto',
            width:'100%',
            paddingLeft:'5px'
          },{width:theme.width?theme.width:'100%'}]"
        >
          <!-- <input
            v-if="isLast(data)"
            :disabled="data.disabled"
            :style="{margin:'5px'}"
            type="checkbox"
            @change="checkboxOnchange(data)"
          > -->
          <o-icon
            v-if="data.icon"
            :icon="data.icon"
          />{{ data.label }}<span :style="[{color:'#777C94'},theme.subLabelStyle]">{{ data.subLabel }}</span>
        </div>
        <div
          v-if="actions && actions.length"
          :style="{width:'20px',flex:'0 0 20px'}"
        >
          <el-dropdown>
            <i
              class="el-icon-more"
              :style="{transform: 'rotate(90deg)'}"
            />
            <el-dropdown-menu
              slot="dropdown"
              class="o-tree-padding"
            >
              <el-dropdown-item
                v-for="action in actions"
                :key="action.id"
              >
                <div
                  class="o-tree-action"
                  @click="action.click(data,node)"
                >
                  <o-icon
                    v-if="action.icon"
                    :icon="action.icon"
                    :style="[{
                      position: 'relative',
                      top: '-10px'
                    },action.style]"
                  />
                  <span
                    v-if="!action.icon"
                    :style="[{
                      position: 'relative',
                      top: '-10px'
                    },action.style]"
                  >
                    {{ action.label }}
                  </span>
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div></el-tree>
    <br >
    <!-- 没有菜单项时候，自定义展示内容 -->
    <slot
      v-if="!$attrs.data || !$attrs.data.length"
      name="empty"
    />
  </div>
</template>

<script>

const isObject = (obj) => {
  return Object.prototype.toString.call(obj) === "[object Object]"
}
const isFuction = (obj) => {
  return Object.prototype.toString.call(obj) === "[object Function]"
}
export default {
  name: "o-tree",
  props: {
    showFilter: Boolean,
    filterPlaceholderText: {
      type: String,
      default() {
        return "请输入内容"
      }
    },
    theme: {
      type: Object,
      // 调整菜单前面的展开与关闭按钮位置
      expandIconOffset:String,
      default() {
        return {
          labelStyle: {},
          subLabelStyle:{},
          with: "100px"
        }
      },
      validator(value) {
        if (!value) {
          return true
        }
        if (value.labelStyle && !isObject(value.labelStyle)) {
          console.error("theme.labelStyle need Object")
          return false
        }
        if (value.hoverStyle && !isObject(value.hoverStyle)) {
          console.error("theme.hoverStyle need Object")
          return false
        }
        if (value.activatedStyle && !isObject(value.activatedStyle)) {
          console.error("theme.activatedStyles need Object")
          return false
        }

        return true
      }
    },
    actions: {
      type: Array,
      default() {
        return []
      },
      validator(value) {
        if (!value.length) {
          return true
        }
        for (const item of value) {
          if (!item.label && !item.icon) {
            console.error("action label or icon need one")
            return false
          }
          if (item.style && !isObject(item.style)) {
            console.error("action style need Object")
            return false
          }
          if (item.click && !isFuction(item.click)) {
            console.error("action click need Function")
            return false
          }
          if (item.type === "custom" && !item.icon) {
            console.error("action icon is required when type is custom")
            return false
          }
          if (item.iconStyle && !isObject(item.iconStyle)) {
            console.error("action iconStyle need Object")
            return false
          }
        }

        return true
      }
    }
  },
  data() {
    return {
      filterText: "",
    }
  },
  computed: {
    dataIsEmpty() {
      return !this.$attrs.data || !this.$attrs.data.length
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    isLast(data) {
      if (data.children && data.children.length) {
        return false
      }
      for (const item of this.$attrs.data) {
        if (item.label === data.label) {
          return false
        }
      } 

      return true
    },
    checkboxOnchange(data) {
      console.log("checkboxOnchange", data)
    }
  }
}
</script>
<style>
.el-tree .el-tree-node__expand-icon {
  display: none;
}

/* .el-tree .el-tree-node .is-leaf+.el-checkbox .el-checkbox__inner {
  display: inline-block;
} */
.el-tree .el-tree-node__content{
  height: 48px;
}
.el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
  display: none;
}
.o-tree-padding {
  width: 132px;
  border: none;
  padding: 8px 12px !important;
}
.o-tree-padding li{
  padding: 13px 0 13px 12px !important;
  height: 40px;
  font-size: 14px;
}
/* 
.el-tree .el-tree-node__content:hover {
  background-color: gray
} */

/* .o-tree-item:hover .o-tree-action {
  display: inline-block;
} */
</style>